<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>

        <h:outputStylesheet library="css" name="index.css"  />
    </h:head>
    <h:body >

        <ui:composition template="/templates/homeTemplate.xhtml">

            <ui:define name="content">
                <div class="container">    
                    <div class="row">
                        <div class="col-sm-2">
                            <h:button value="Back" outcome="AdminP" style="width:100px;height: 40px;line-height: 13px;" styleClass="Pbutton">
                                <span style="position: absolute;left:23px;top: 13px;pointer-events: none;" class="glyphicon glyphicon-arrow-left"></span>
                            </h:button>
                        </div>

                        <div class="col-sm-8">

                            <h3 style="text-align: center;">Admin user Management</h3>
                        </div>
                        
                        
                        
                        
                    </div>
                    <hr style="margin: 0px;margin-bottom: 5px;"/>

                    <h:form>
                        <div class="row">
                            <div class="col-sm-2">
                                <h:button style="width:145px;height: 40px;line-height: 13px;text-align: left;margin-top: 10px;" styleClass="Pbutton" value="Create User" outcome="ACreateUserP">
                                                <span style="position: absolute;right:43px;top: 23px;pointer-events: none;" class="glyphicon glyphicon-plus"></span>
                                </h:button>   
                                
                            </div>
                        </div>  
                        

                        <div class="row">
                            <h:inputText styleClass="search" style="margin-top: 15px;" id="searchString" title="searchString"  pt:placeholder="Search" value="#{admin.user.usearch}" >
                                <f:ajax event="keyup" render="prod results prodform" listener="#{admin.SearchUsers}" execute="@form"/>
                            </h:inputText>
                        </div>  
                        
                        <div class="row">
                            <div class="col-xs-6">
                                
                            </div>
                            <div class="col-xs-3" style="font-size: 16px;top: 16px;">
                                <h:selectBooleanCheckbox value="#{admin.user.showAdmins}"  > 
                                    <f:ajax listener="#{admin.SearchUsers}" render="prod results prodform" execute="@form" />
                                </h:selectBooleanCheckbox>
                                Show Admins only
                            </div>
                            <div class="col-xs-3">
                                <h:panelGroup id="results">
                                    <div class="resultsc">
                                        (Max 36 per page) Results:<h:outputText   value="#{admin.users.size()}"/>
                                    </div>
                                </h:panelGroup>        
                            </div>
                        </div>            

                    </h:form>


                    <div class="row">
                        
                        <h:panelGroup id="prod">
                            <h:form id="prodform" styleClass="empty">
                                <ui:repeat var="item"  value="#{admin.users}"> 


                                        <div class="col-sm-2 ausercell" style="padding: 10px;">
                                            <div class="panel panel-primary #{item.admin ? 'adminUser' : ''}" >
                                                
                                                <h:commandLink styleClass="empty productPanel" style="cursor:pointer;" action="#{admin.ViewUser(item)}">
                                                    <div class="productPanel">
                                                        <div class="panel-heading #{item.admin ? 'adminUser' : ''}" style="height: 41px;padding-top: 1px;">#{item.FName} #{item.LName}</div>
                                                    </div>
                                                </h:commandLink>
                                                <div class="panel-footer"  style="height: 135px;"> 

                                                    <div class="row" style="height: 40px;padding:5px;">
                                                        
                                                        <p class="prodPrice" style="color:black;font-size: 10px;width:95%;word-wrap: break-word;">#{item.address.email}</p> 
                                                    </div>
                                                    
                                                    <div class="row" >  
                                                        <div class="col-xs-3"></div>
                                                        <h:panelGroup id="buttonendis">
                                                            <h:panelGroup  layout="block" styleClass="col-xs-2" rendered="#{!item.admin}">
                                                                <h:commandButton  styleClass="Hbutton" value=" " style="width:30px;color:black;" action="#{admin.PromoteUser(item, false)}">
                                                                    <span style="position: absolute;left:13px;top:8px;pointer-events: none;" class="glyphicon glyphicon-plus"></span>
                                                                    <f:ajax execute="@this" render="buttonendis prodform prod"/>
                                                                </h:commandButton> 
                                                            </h:panelGroup>
                                                            <h:panelGroup  layout="block" styleClass="col-xs-2" rendered="#{item.admin}">
                                                                <h:commandButton  styleClass="Hbutton" value=" " style="width:30px;color:black;" action="#{admin.DemoteUser(item, false)}">
                                                                    <span style="position: absolute;left:13px;top:8px;pointer-events: none;" class="glyphicon glyphicon-minus"></span>
                                                                    <f:ajax execute="@this" render="buttonendis prodform prod"/>
                                                                </h:commandButton> 
                                                            </h:panelGroup>
                                                            <div class="col-xs-2"></div>
                                                            <h:panelGroup  layout="block" styleClass="col-xs-2">
                                                                <h:commandButton  styleClass="Hbutton" value=" "  onclick="if (! confirm('Are you sure you want to delete this user?\nIt will delete their address, order history and shopping cart')) return false" style="width:30px;color:black;" action="#{admin.RemoveUser(item)}">
                                                                    <span style="position: absolute;left:13px;top:8px;pointer-events: none;color:black;" class="glyphicon glyphicon-remove"></span>
                                                                    <f:ajax execute="@this" render="buttonendis prodform prod"/>
                                                                </h:commandButton> 
                                                            </h:panelGroup> 
                                                        </h:panelGroup>
                                                        <div class="col-xs-3"></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col align-self-center">

                                                            <hr class="separator"></hr>
                                                        </div>
                                                    </div>
                                                    <div class="row" style="padding-left:5px;text-align: center;">
                                                        #{item.address.city}
                                                    </div>
                                                    <div class="row" style="padding-left:5px;text-align: center;">
                                                        #{item.address.county}
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        </div>

                                </ui:repeat>
                            </h:form>
                        </h:panelGroup>
                        
                        <br></br>                                               
                    </div>        

                </div>
            </ui:define>
        </ui:composition>

        

    </h:body >
</html>
